<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCateHot, getCateArticle, getCateEdit } from '../api/cate'
import { viewCount, filters, vidotime } from '../hooks/filters'

export default defineComponent({

    components: {},
    // props:['worksshow'],
    setup() {

        let actives: any = ref(0);
        let router: any = useRouter();
        let route: any = useRoute();
        let search: any = (): any => {
            router.push({ path: '/searchpage' });
        }
        let workshows: any = (): any => {
            router.push({ path: '/worksshow' });
        };
        let headerList: any = ref(null);
        let list: any = ref(null);
        let getCateArticleFun = (id: any) => {
            getCateArticle({
                category_id: id
            }).then(data => {
                list.value = data.data.list;
                console.log("热门分类内容List", list.value);

            })
        };
        let getCateEditFun = () => {
            getCateEdit({
                type: 16
            }).then(data => {
                console.log("编辑精选分类=>", data);
                headerList.value = data.data.header;
            })
        }
        let gettab = (value: any) => {
            console.log(value.name);
            getCateArticleFun(value.name);
        };
        let back = () => {
            router.back();
        };
        // 点击跳转视频详情页面
        let toparticulars = (videoid: any, video_library_id: any) => {
            console.log(videoid, video_library_id);

            router.push({
                path: '/videoDes',
                query: {
                    aid: videoid,
                    mid: video_library_id
                }

            })
        }
        // 点击跳转个人主页面数据
        let toauthorparticulars = (userid: any) => {
            router.push({
                path: '/userdetail',
                query: {
                    userid: userid
                }

            })
        }
        onMounted(() => {
            getCateArticleFun(4);
            getCateEditFun();
        })
        // 获取主要内容
        var classifylist: any = ref(null);
        var classifymain: any = ref(null);
        var classifymainlist: any = ref(null);
        let id = ref(route.query.id);
        let indexlist: any = ref(null)


        // 生命周期
        onMounted(() => {
        })

        return {
            search,
            workshows,
            actives,
            classifylist,
            classifymain,
            classifymainlist,
            filters,
            headerList,
            gettab,
            list,
            back,
            toparticulars,
            toauthorparticulars
        }
    },

})
</script>


<template>
    <div class="worksshow" v-if="headerList">
        <!-- 固定定位盒子 -->
        <div class="fixed-box">
            <!-- 头部区域 -->
            <div class="worksshow-navigation">
                <div class="worksshow-back iconfont icon-xiangzuojiantou" @click="back"></div>
                <div class="works-title">分类精选</div>
            </div>
            <!-- 分割线 -->
            <div class="division"></div>
        </div>
        <div style="height: 55px;"></div>

        <!-- 分类块 -->
        <div class="worksshow-classify">
            <!-- 选项卡标签 -->
            <div class="worksshow-classify-left">

                <van-tabs v-model:active="actives" sticky animated swipeable color="#ee3729" title-active-color="#d5461f"
                    title-inactive-color="#8a8a8a" offset-top=55 @click-tab="gettab">
                    <van-tab v-for="item in headerList.categories" :key="item.value" :title=item.title :name="item.value">
                        <!-- 主要内容开始 -->
                        <div class="worksshow-content-main">
                            <div class="worksshow-content" v-for="con in list" :key="con.id"
                                @click.stop="toparticulars(con.id, con.vid)">
                                <div class="worksshow-vido">
                                    <img :src="con.cover+'?param=5y5'" alt="">
                                </div>
                                <div class="worksshow-size">
                                    <div class="works-size-title text-cut">{{ con.title }}</div>
                                    <div class="works-numall">
                                        <div class="work-numall-num">播放量{{ filters(con.count.count_view) }}</div>
                                        <span>.</span>
                                        <div class="work-like">喜欢{{ filters(con.count.count_like) }}</div>
                                    </div>
                                    <div class="author" @click.stop="toauthorparticulars(con.author.userinfo.id)">
                                        <div class="author-heardimage">
                                            <img :src="con.author.userinfo.avatar" alt="">
                                        </div>
                                        <div class="author-name">{{ con.author.userinfo.username }}</div>
                                        <div
                                            :class="['author-identification', 'iconfont', { 'icon-VIP1': con.author.userinfo.vip_groups.list }]">
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </van-tab>
                </van-tabs>

            </div>
            <div class="worksshow-classify-right">
                <div class="work-dot-fatch">
                    <p class="worksshow-dot">...</p>
                    <p class="worksshow-dot">...</p>
                    <p class="worksshow-dot">..</p>
                </div>
            </div>
        </div>



    </div>
</template>
<style lang="scss">
.worksshow {
    .fixed-box {
        width: 100%;
        // height: 100%;
        position: fixed;
        z-index: 100;
        background: white;

        .worksshow-navigation {
            margin: 18px;
            display: flex;

            .worksshow-back {
                font-size: 17px;
                width: 10%;
                font-weight: 600;
                z-index: 2;
                position: absolute;

            }

            .works-title {
                width: 100%;
                height: 17px;
                font-size: 17px;
                font-weight: 600;
                // position: absolute;
                text-align: center;
            }

        }

        .division {
            width: 100%;
            height: 2px;
            background: #f7f7f7;
            z-index: 1100;

        }
    }


    .worksshow-classify {
        position: relative;

        .worksshow-classify-left {
            overflow: hidden;

            .van-tab__text {
                padding: 5px;
                box-sizing: border-box;
                background-color: #f7f7f7;
                padding: 3px 8px;
                border-radius: 5px;
            }

            .van-tabs__line {
                height: 0;
            }

            .worksshow-content-main {
                padding: 12px 15px;

                .worksshow-content {
                    padding: 12px 0;

                    // width: 100%;
                    // border: 1px solid;
                    border-bottom: 1px solid #f9f9f9;
                    border-top: 1px solid #f9f9f9;
                    display: flex;
                    justify-content: space-between;

                    .worksshow-vido {
                        width: 45%;
                        height: 88px;
                        background: #bbbbbb;
                        border-radius: 10px;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;

                        }

                    }

                    .worksshow-size {
                        width: 50%;

                        .works-size-title {
                            font-size: 14px;
                            line-height: 20px;
                            font-weight: 600;
                            height: 40px;
                            padding-top: 5px;

                        }

                        .works-numall {
                            display: flex;
                            font-size: 11px;
                            margin-top: 5px;

                            .work-numall-num {
                                color: #bbbbbb;
                                margin-right: 5px;
                            }

                            span {
                                margin-right: 5px;
                                color: #bbbbbb;


                            }

                            .work-like {
                                color: #bbbbbb;


                            }
                        }

                        .author {
                            display: flex;
                            height: 16px;
                            // background: aqua;
                            margin-top: 5px;

                            .author-name {
                                font-size: 11px;
                                margin-right: 8px;

                            }

                            .author-identification {
                                color: rgb(164, 42, 62);
                            }

                            .author-heardimage {
                                width: 16px;
                                height: 16px;
                                border-radius: 50%;
                                overflow: hidden;
                                background-color: #bbbb;
                                margin-right: 8px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }

            }

        }

        .worksshow-classify-right {
            width: 10%;
            position: fixed;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: white;
            top: 55px;
            box-shadow: -10px 0px 8px 0px white;
            z-index: 100;
            right: 0;

            .work-dot-fatch {
                height: 100%;
                padding-left: 10px;

                .worksshow-dot {
                    // display: block;
                    height: 6px;
                    text-align: left;
                    font-size: 18px;
                    line-height: 18px;
                    font-weight: 600;
                }
            }


        }
    }

}
</style>